/* fonts */
@import '@fontsource/atkinson-hyperlegible';
@import '@fontsource-variable/manrope';
@import '@fontsource-variable/jetbrains-mono';

/* presentation */
@import '@animotion/core/theme';

/* tailwind */
@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';

/* reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: capitalize;
}

h1 {
	font-size: var(--size-5);
}

h2 {
	border-bottom: 1px solid var(--border);
	padding-bottom: var(--size-2);
}

a {
	color: var(--brand);
	text-decoration: none;
	text-decoration-color: var(--brand);
	text-underline-offset: 4px;
	transition: color 0.3s ease;

	&:hover {
		text-decoration: underline;
		cursor: pointer;
	}
}

ul {
	list-style-position: inside;
}

img,
picture,
video,
iframe,
canvas,
svg
{
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

button {
	all: unset;
	cursor: pointer;
}

.shiki {
	padding: var(--size-3);
	border-radius: var(--radius-1);
	border: 1px solid hsl(0 0% 0% / 2%);
	box-shadow: var(--shadow-1);
	overflow: auto;
	tab-size: 2;

	.line span {
		font-style: normal !important;
	}
}

code,
kbd {
	font-family: var(--font-mono);
}

table {
	border-collapse: collapse;
}

th,
td {
	padding: var(--size-2);
	text-align: left;
	border: 1px solid hsl(0 0% 100% / 40%);
}

/* global */
:root {
	color-scheme: dark;

	--font-sans: 'Atkinson Hyperlegible', sans-serif;
	--font-mono: 'JetBrains Mono Variable', monospace;
	--brand: var(--brand-dark);
	--bg: var(--bg-dark);
	--text-1: var(--text-1-dark);
	--text-2: var(--text-2-dark);
	--text-3: var(--text-3-dark);
	--surface-1: var(--surface-1-dark);
	--scrollbar: var(--scrollbar-dark);
	--border: var(--border-dark);
}

html {
	/* 1rem = 10px */
	font-size: 62.5%;

	/* typography */
	--font-size-text: 2rem;
	--font-size-1: 0.8rem;
	--font-size-2: 1.6rem;
	--font-size-3: 1.8rem;
	--font-size-4: 2.4rem;
	--font-size-5: 4.8rem;
	--font-size-6: 9.6rem;

	/* sizes */
	--size-0: 0.4rem;
	--size-1: 0.8rem;
	--size-2: 1.6rem;
	--size-3: 2.4rem;
	--size-4: 3.2rem;
	--size-5: 4.8rem;
	--size-6: 9.6rem;

	/* colors */
	--white-1: hsl(220 14% 98%);
	--white-2: hsl(220 14% 84%);
	--white-3: hsl(220 14% 60%);
	--blue-1: hsl(220 14% 10%);
	--blue-2: hsl(200 40% 14%);
	--blue-3: hsl(220 14% 20%);
	--blue-4: hsl(220 14% 28%);
	--blue-5: hsl(220 14% 40%);
	--aqua-1: hsl(180 100% 20%);
	--aqua-2: hsl(180 100% 50%);

	/* radius */
	--radius-1: 8px;
	--radius-2: 16px;

	/* shadows */
	--shadow-1: 1px 1px 10px hsl(220 14% 10% / 20%);

	/* light */
	--brand-light: var(--aqua-1);
	--bg-light: var(--white-1);
	--text-1-light: var(--blue-1);
	--text-2-light: var(--blue-2);
	--text-3-light: var(--blue-5);
	--surface-1-light: var(--white-1);
	--border-light: var(--white-2);

	/* dark */
	--brand-dark: var(--aqua-2);
	--bg-dark: var(--blue-1);
	--text-1-dark: var(--white-1);
	--text-2-dark: var(--white-2);
	--text-3-dark: var(--white-3);
	--surface-1-dark: var(--blue-1);
	--border-dark: var(--blue-2);
}

html,
body {
	height: 100%;
}

body {
	padding-inline: var(--padding, var(--size-3));
	font-family: var(--font-sans);
	font-size: var(--font-size-text);
	line-height: 1.6;
	color: var(--text-1);
	background-color: var(--bg);
	transition: color 0.3s ease;

	@media (width > 1280px) {
		--padding: 0rem;
	}
}

blockquote {
	padding: var(--size-4);
	border-radius: var(--radius-1);
	border: 1px solid var(--border);
	opacity: 0.9;
}

.section a {
	display: inline-block;
	margin-block: var(--size-5);
	color: var(--text-1);
	font-size: var(--font-size-2);
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: underline;

	@media (width > 680px) {
		font-size: var(--font-size-4);
	}

	&:hover {
		color: var(--brand);
	}

	&.previous {
		&::before {
			content: '👈️ ';
		}
	}

	&.next {
		&::after {
			content: ' 👉️';
		}
	}
}

/* theme */
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		--brand: var(--brand-light);
		--bg: var(--bg-light);
		--text-1: var(--text-1-light);
		--text-2: var(--text-2-light);
		--text-3: var(--text-3-light);
		--surface-1: var(--surface-1-light);
		--border: var(--border-light);
	}
}

[color-scheme='light'] {
	color-scheme: light;

	--brand: var(--brand-light);
	--bg: var(--bg-light);
	--text-1: var(--text-1-light);
	--text-2: var(--text-2-light);
	--text-3: var(--text-3-light);
	--surface-1: var(--surface-1-light);
	--border: var(--border-light);
}

[color-scheme='dark'] {
	color-scheme: dark;

	--brand: var(--brand-dark);
	--bg: var(--bg-dark);
	--text-1: var(--text-1-dark);
	--text-2: var(--text-2-dark);
	--text-3: var(--text-3-dark);
	--surface-1: var(--surface-1-dark);
	--border: var(--border-dark);
}

/* utils */
.container {
	max-width: 1280px;
	margin-inline: auto;
}

.surface-1 {
	color: var(--text-1);
	background-color: var(--surface-1);
}

.surface-2 {
	color: var(--text-2);
	background-color: var(--surface-2);
}

.capitalize {
	text-transform: capitalize;
}

.flex {
	display: flex;
	gap: var(--gap, 0rem);
}

.flex-items-center {
	display: flex;
	align-items: center;
}

.space-x > * + * {
	margin-inline-start: var(--margin, var(--size-1));
}

.space-y > * + * {
	margin-block-start: var(--margin, var(--size-1));
}

.space-between {
	display: flex;
	justify-content: space-between;
}

.place-content-center {
	display: grid;
	place-content: center;
}

.bold {
	font-weight: 700;
}

.margin-text-center {
	margin-inline: auto;
	text-align: center;
}

/* inline code */
:not(pre) > code[class*='language-'],
:not(pre) > code {
	padding: 0.1em 0.2em;
	color: var(--blue-1);
	background-color: hsl(200 40% 90%);
	border-radius: 0.3em;
	white-space: normal;
}

/* presentation */
:root {
	--r-background-color: oklch(24% 0.019 272);
	--r-main-font: 'Manrope Variable';
	--r-main-font-size: 42px;
	--r-main-color: oklch(98% 0.02 272);
	--r-heading-font: 'Manrope';
	--r-code-font: 'JetBrains Mono Variable';
	--r-link-color: oklch(90.54% 0.15 194);
	--ease: linear(
		0 0%,
		0.0036 9.62%,
		0.0185 16.66%,
		0.0489 23.03%,
		0.0962 28.86%,
		0.1705 34.93%,
		0.269 40.66%,
		0.3867 45.89%,
		0.5833 52.95%,
		0.683 57.05%,
		0.7829 62.14%,
		0.8621 67.46%,
		0.8991 70.68%,
		0.9299 74.03%,
		0.9545 77.52%,
		0.9735 81.21%,
		0.9865 85%,
		0.9949 89.15%,
		1 100%
	);
}

::view-transition-group(*) {
	animation-duration: 0.6s;
	animation-timing-function: var(--ease);
}

.enter {
	animation: enter 0.6s var(--ease);
}

.rotate {
	animation: rotate 0.6s var(--ease);
}

@keyframes enter {
	from {
		filter: blur(40px);
		scale: 0;
	}
}

@keyframes rotate {
	from {
		filter: blur(4px);
		scale: 2;
		rotate: -1turn;
	}
}